<template>
  <div class="consignstate">
    <div class="consignchange"><span>订单发货</span></div>
    <el-form>
      <el-form-item label="发货状态">
        <el-radio-group v-model="form.shippingStatus">
          <el-radio :label="1">已发货</el-radio>
          <el-radio :label="2">未发货</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 发货时间 -->
      <el-form-item
        label="发货时间"
        class="completedata"
        v-show="form.shippingStatus === 1"
      >
        <el-date-picker v-model="form.date1" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="物流公司" v-show="form.shippingStatus === 1">
        <el-input type="primary" v-model="form.gongsi"></el-input>
      </el-form-item>

      <el-form-item label="物流单号" v-show="form.shippingStatus === 1">
        <el-input type="primary" v-model="form.number"></el-input>
      </el-form-item>
      <!-- 发货备注 -->
      <el-form-item label="发货备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <!-- 按钮 -->

      <div class="btnbox">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">关闭</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ChangeshippingStatusAxios } from "../../../http/apis/orderApi/index";
export default {
  name: "ConsignState",
  data() {
    return {
      form: {
        shippingStatus: 1,
        date1: "",
        gongsi: "",
        number: "",

        desc: "",
      },
      id: "",
      info: "",
    };
  },
  created() {
    // 获取info
    this.info = this.$route.query.info;
    // 获取id
    const id = this.$route.query.info.order_id;
    // console.log(info);
    this.id = id;
    // 获取当前路由参数
    this.state = this.$route.query.state;
    console.log("当前路由参数", this.state);
  },
  methods: {
    submitForm() {
      const shippingStatus = this.form.shippingStatus;
      console.log("发货状态：", shippingStatus);
      ChangeshippingStatusAxios(shippingStatus, this.id)
        .then((res) => {
          console.log("发货状态请求成功", res.data);
        })
        .catch((err) => {
          console.log("发货状态请求失败", err);
        });

      if (this.state == "list") {
        this.$router.push({
          path: "/order/orderlist",
          query: { info: this.info },
        });
      } else if (this.state == "clientname") {
        this.$router.push({
          path: "/information/clientname",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-day") {
        this.$router.push({
          path: "/order/orderadd-day",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-week") {
        this.$router.push({
          path: "/order/orderadd-day",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-month") {
        this.$router.push({
          path: "/order/orderadd-month",
          query: { info: this.info },
        });
      }
    },
    // 关闭
    resetForm() {
      if (this.state == "list") {
        this.$router.push({
          path: "/order/orderlist",
          query: { info: this.info },
        });
      } else if (this.state == "clientname") {
        this.$router.push({
          path: "/information/clientname",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-day") {
        this.$router.push({
          path: "/order/orderadd-day",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-week") {
        this.$router.push({
          path: "/order/orderadd-day",
          query: { info: this.info },
        });
      } else if (this.state == "orderadd-month") {
        this.$router.push({
          path: "/order/orderadd-month",
          query: { info: this.info },
        });
      }
    },
  },
};
</script>

<style lang='scss' scopde>
.consignstate {
  width: 400px;
  margin: 0 auto;
}
.consignchange {
  width: 400px;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.consignchange span {
  font-size: 20px;
}
.btnbox {
  width: 150px;
  margin: 20px auto;
}
</style>